import React, { useState, useEffect } from 'react';
import { Table, Button, notification } from 'antd';
import SearchList from '@/components/SearchList';
import {
  EyeFilled,
  PlusCircleFilled,
  EditFilled,
  DeleteFilled,
} from '@ant-design/icons';
import API from '@/api';
import { transFormIndex, showDeleteConfirm } from '@/utils/util';
import { connect, useDispatch, Access, useAccess, useModel } from 'umi';
import moment from 'moment';
const EmergencyPlan = ({ history, planOptions, orgList }) => {
  const access = useAccess();
  const { initialState = {} } = useModel('@@initialState');
  const { orgId } = initialState.info;
  const [list, setList] = useState([]);
  const [pagination, setPagination] = useState({
    showQuickJumper: true,
  });
  const searchList = [
    {
      name: 'orgId',
      title: '单位名称',
      type: 'select',
      otherProps: {
        options: orgList,
      },
    },
    {
      name: 'ysnd',
      title: '预算年度',
      type: 'datepicker',
      otherProps: {
        picker: 'year',
      },
    },
  ];

  const [params, setParams] = useState({
    pageNo: 1,
    pageSize: 10,
  });
  const dispatch = useDispatch();
  if (!orgList) {
    dispatch({
      type: 'dict/queryOrgList',
      payload: {
        orgId,
      },
    });
  }
  if (!planOptions) {
    dispatch({
      type: 'dict/queryPlanType',
    });
  }
  const searchFn = (data) => {
    setParams({
      ...data,
      pageNo: 1,
      pageSize: 10,
    });
  };
  const initList = (data = {}) => {
    const defaultData = {
      orgId: -1,
      ysnd: '',
    };
    for (const key in defaultData) {
      if (data[key] === undefined) {
        data[key] = defaultData[key];
      } else {
        data.ysnd = data.ysnd ? moment(data.ysnd).format('YYYY') : '';
      }
    }
    const values = { ...params, ...data };
    API.getEB(values).then((res) => {
      if (res?.t) {
        setList(res.t.queryList);
        setPagination({
          ...pagination,
          total: res.t.totalSize,
          current: res.t.currentPage,
          pageSize: res.t.pageSize,
        });
      }
    });
  };
  const changeTable = (pagination) => {
    setParams({
      ...params,
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
    });
  };
  const delFn = (id) => {
    API.delEB({ id }).then((res) => {
      if (res) {
        notification.success({
          message: '删除成功',
        });
        initList();
      }
    });
  };
  useEffect(() => {
    initList(params);
  }, [params]);

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      render: (text, r, index) => transFormIndex(pagination, index),
    },
    {
      title: '单位名称',
      dataIndex: 'orgName',
      align: 'center',
    },
    {
      title: '预算额度(元)',
      dataIndex: 'ysed',
      align: 'center',
    },
    {
      title: '预算年度',
      dataIndex: 'ysnd',
      align: 'center',
    },
    {
      title: '创建人',
      dataIndex: 'createName',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'Operation',
      align: 'center',
      render: (t, r) => (
        <div>
          <Button
            type="link"
            icon={<EyeFilled />}
            className="table-icon"
            onClick={dispatchFn.bind(null, {
              type: 'detail',
              id: r.id,
            })}
          ></Button>
          <Access accessible={access.canHandle(r.createId)}>
            <Button
              type="link"
              icon={<EditFilled />}
              className="table-icon"
              onClick={dispatchFn.bind(null, {
                type: 'edit',
                id: r.id,
              })}
            ></Button>
            <Button
              type="link"
              icon={<DeleteFilled />}
              className="table-icon"
              onClick={() => showDeleteConfirm(delFn.bind(null, r.id))}
            ></Button>
          </Access>
        </div>
      ),
    },
  ];

  const dispatchFn = (action) => {
    history.push({
      pathname: `/networkDefence/securityBudget/${action.type}`,
      query: {
        id: action.id,
        stauts: action.stauts,
      },
    });
  };
  return (
    <>
      <SearchList searchList={searchList} initList={searchFn}></SearchList>
      <div className="bgf main-x">
        <div className="tools-x">
          <Button
            type="link"
            icon={<PlusCircleFilled />}
            className="btn-icon"
            onClick={dispatchFn.bind(null, {
              type: 'create',
            })}
          >
            新增
          </Button>
        </div>
        <Table
          columns={columns}
          rowKey="id"
          dataSource={list}
          onChange={changeTable}
          className="custom-table"
          pagination={pagination}
        ></Table>
      </div>
    </>
  );
};
export default connect(({ dict }) => ({
  planTypes: dict.planTypes,
  planOptions: dict.planOptions,
  orgList: dict.orgList,
}))(EmergencyPlan);
